<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions" xmlns:c="http://java.sun.com/jsp/jstl/core">

	<p:dialog id="chuyenBanDialogId" header="Chuyển bàn" widgetVar="chuyenBanDialog" showEffect="fade" hideEffect="fade"
		resizable="true" modal="true" appendToBody="true" onHide="resetData()">
		<h:form id="chuyenBanFormId">
			<p:remoteCommand name="resetData" action="#{chuyenBan.resetData}" oncomplete="dialogCallback();" update="@form" />
			<f:facet name="header">
				<p:outputLabel>Chuyển từ bàn: #{danhSachBanKhuVuc.selectedBansLabel}<br />
				Tới bàn: #{chuyenBan.movedToBansLabel}</p:outputLabel>
			</f:facet>
			<p:tabView id="chuyenBanViewId" value="#{danhSachBanKhuVuc.kvDTOs}" var="kvDTO" style="width:100%;height:100%;">
				<p:tab title="#{kvDTO.khuVuc.name}">
					<p:dataGrid var="ban" value="#{kvDTO.bans}" columns="3">
						<p:commandLink id="banId" action="#{chuyenBan.onClickBan(ban)}" update="@form">
							<p:graphicImage library="icons" name="lightbrownCoffee48.png"
								style="#{chuyenBan.isMovedToBan(ban)? 'background:gray;' :''}" />
							<br />
							<p:outputLabel value="#{ban.name}" />
						</p:commandLink>
					</p:dataGrid>
					<p:commandButton value="Chuyển bàn" action="#{danhSachBanKhuVuc.chuyenBan(chuyenBan.movedToBans)}"
						update=":banKhuVucLayoutId @form" disabled="#{!chuyenBan.coTheChuyenBan}"
						oncomplete="if (!args.validationFailed) chuyenBanDialog.hide();" />
					<p:commandButton value="Hủy bỏ" immediate="true" onclick="chuyenBanDialog.hide()" />
				</p:tab>
			</p:tabView>
			<p:panel id="chiTietPanelId">
				<p:outputLabel value="Vui lòng chọn hoặc mở bàn" rendered="#{banHang.donHang == null}" />
				<p:dataTable id="chiTietTableId" value="#{chuyenBan.donHangGopTam.chiTietDonHangs}" var="chiTietDonHang"
					scrollable="true" scrollHeight="150">

					<f:facet name="header">Đơn hàng bàn #{danhSachBanKhuVuc.selectedBansLabel}</f:facet>

					<p:column width="150" headerText="Name">
						<h:outputText value="#{chiTietDonHang.sanPham.name}" />
					</p:column>

					<p:column width="50" headerText="SL">
						<h:outputText value="#{chiTietDonHang.soLuong}" />
					</p:column>

					<p:column width="70" headerText="Đơn giá">
						<h:outputText value="#{chiTietDonHang.donGia}" />
					</p:column>

					<p:column width="70" headerText="Thành tiền">
						<h:outputText value="#{chiTietDonHang.soLuong * chiTietDonHang.donGia}" />
					</p:column>

					<f:facet name="footer">
                                    Footer
                                </f:facet>
				</p:dataTable>
				<p:panelGrid id="tongCongPanelId" style="float:right; text-align:right;">
					<p:row>
						<p:column>
							<p:outputLabel value="Tổng cộng: " />
						</p:column>
						<p:column colspan="2">
							<p:outputLabel value="#{chuyenBan.donHangGopTam.tongGiaSanPham}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="Giảm giá: " />
						</p:column>
						<p:column>
							<p:spinner value="#{chuyenBan.donHangGopTam.giamGia}" min="0" max="100">
								<p:ajax update="tienGiamGiaId, thanhToanId" process="@this" />
							</p:spinner>
						</p:column>
						<p:column>
							<p:outputLabel id="tienGiamGiaId"
								value="#{chuyenBan.donHangGopTam.tongGiaSanPham*chuyenBan.donHangGopTam.giamGia/100}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="Thanh toán: " />
						</p:column>
						<p:column id="thanhToanId" colspan="2">
							<p:outputLabel value="#{chuyenBan.donHangGopTam.tongGiaThanhToan}" />
						</p:column>
					</p:row>
				</p:panelGrid>
			</p:panel>
		</h:form>
	</p:dialog>
</ui:composition>